<template>
  <div class="security-monitor">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>防盗监控</h2>
      <div class="header-actions">
        <el-button type="primary" icon="el-icon-refresh" @click="refreshData">刷新数据</el-button>
        <el-button type="success" icon="el-icon-setting" @click="showSettings">参数配置</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <el-row :gutter="20">
        <!-- 左侧：雷达图和报警日志 -->
        <el-col :span="12">
          <div class="left-panel">
            <!-- 雷达图组件 -->
            <div class="radar-section">
              <div class="radar-container">
                <svg class="radar-svg" viewBox="0 0 300 300">
                  <!-- 背景圆 -->
                  <circle cx="150" cy="150" r="140" fill="#000" stroke="#1e3a8a" stroke-width="2"/>
                  
                  <!-- 同心圆 -->
                  <circle cx="150" cy="150" r="35" fill="none" stroke="#1e3a8a" stroke-width="1" opacity="0.6"/>
                  <circle cx="150" cy="150" r="70" fill="none" stroke="#1e3a8a" stroke-width="1" opacity="0.6"/>
                  <circle cx="150" cy="150" r="105" fill="none" stroke="#1e3a8a" stroke-width="1" opacity="0.6"/>
                  <circle cx="150" cy="150" r="140" fill="none" stroke="#1e3a8a" stroke-width="1" opacity="0.6"/>
                  
                  <!-- 十字标线 -->
                  <line x1="10" y1="150" x2="290" y2="150" stroke="#1e3a8a" stroke-width="1" opacity="0.6"/>
                  <line x1="150" y1="10" x2="150" y2="290" stroke="#1e3a8a" stroke-width="1" opacity="0.6"/>
                  
                  <!-- 扫描扇形 -->
                  <defs>
                    <linearGradient id="scanGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:0"/>
                      <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:0.8"/>
                    </linearGradient>
                  </defs>
                  <path 
                    :d="scanPath" 
                    fill="url(#scanGradient)" 
                    :transform="`rotate(${scanAngle} 150 150)`"
                  />
                </svg>
              </div>
            </div>

            <!-- 报警日志 -->
            <div class="alarm-log-section">
              <div class="section-header">
                <div class="header-title">
                  <div class="blue-line"></div>
                  <span>报警日志</span>
                </div>
              </div>
              <div class="log-container" v-loading="logLoading">
                <div v-if="alarmLogs.length === 0 && !logLoading" class="no-data">
                  <div class="no-data-icon">
                    <svg viewBox="0 0 64 64" width="48" height="48">
                      <!-- 文件图标 -->
                      <rect x="12" y="8" width="32" height="44" rx="2" fill="#3b82f6" opacity="0.8"/>
                      <rect x="16" y="12" width="24" height="2" fill="white" opacity="0.8"/>
                      <rect x="16" y="18" width="20" height="2" fill="white" opacity="0.6"/>
                      <rect x="16" y="24" width="16" height="2" fill="white" opacity="0.4"/>
                      
                      <!-- 放大镜 -->
                      <circle cx="42" cy="42" r="8" fill="none" stroke="#3b82f6" stroke-width="2"/>
                      <line x1="48" y1="48" x2="54" y2="54" stroke="#3b82f6" stroke-width="2"/>
                    </svg>
                  </div>
                  <div class="no-data-text">暂无数据</div>
                </div>
                <div v-for="(log, index) in alarmLogs" :key="index" class="log-item">
                  <span class="log-time">{{ formatTime(log.createTime) }}</span>
                  <el-tag :type="getLogTagType(log.logType)" size="mini">{{ getLogTypeText(log.logType) }}</el-tag>
                  <span class="log-device">{{ log.deviceName }}</span>
                  <span class="log-message">{{ log.deviceOpLog }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 右侧：设备信息卡片 -->
        <el-col :span="12">
          <div class="right-panel">
            <div class="device-card">
              <!-- 设备标题 -->
              <div class="device-header">
                <span class="device-title">{{ deviceInfo ? deviceInfo.deviceName : '红外双鉴设备_1' }}</span>
                <el-button type="text" class="settings-btn" @click="showDeviceSettings">
                  <i class="el-icon-setting"></i>
                </el-button>
              </div>

              <!-- 设备状态信息 -->
              <div class="device-status">
                <div class="status-item">
                  <span class="status-label">设备状态：</span>
                  <span class="status-value" :class="getDeviceStatusClass()">{{ getDeviceStatusText() }}</span>
                </div>
                <div class="status-item">
                  <span class="status-label">布防状态：</span>
                  <span class="status-value" :class="getOpStatusClass()">{{ getOpStatusText() }}</span>
                </div>
              </div>

              <!-- 工作模式选择 -->
              <div class="work-mode">
                <div class="mode-label">工作模式:</div>
                <el-radio-group v-model="workMode" @change="onWorkModeChange">
                  <el-radio label="timing">定时</el-radio>
                  <el-radio label="manual">手动</el-radio>
                </el-radio-group>
              </div>
            </div>

            <!-- 空白区域保持简洁性 -->
            <div class="blank-area"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getSecurityLogs, getSecurityDeviceList, updateDeviceWorkMode } from "@/api/archives/security";

export default {
  name: "SecurityMonitor",
  data() {
    return {
      // 雷达扫描角度
      scanAngle: 0,
      // 扫描动画定时器
      scanTimer: null,
      // 报警日志数据
      alarmLogs: [],
      // 设备数据
      deviceInfo: null,
      // 工作模式
      workMode: '',
      // 加载状态
      loading: false,
      logLoading: false
    }
  },
  computed: {
    // 扫描扇形路径
    scanPath() {
      const centerX = 150;
      const centerY = 150;
      const radius = 140;
      const angle = 60; // 扇形角度
      
      const startAngle = -angle / 2;
      const endAngle = angle / 2;
      
      const startX = centerX + radius * Math.cos((startAngle * Math.PI) / 180);
      const startY = centerY + radius * Math.sin((startAngle * Math.PI) / 180);
      const endX = centerX + radius * Math.cos((endAngle * Math.PI) / 180);
      const endY = centerY + radius * Math.sin((endAngle * Math.PI) / 180);
      
      return `M ${centerX} ${centerY} L ${startX} ${startY} A ${radius} ${radius} 0 0 1 ${endX} ${endY} Z`;
    }
  },
  mounted() {
    this.startRadarScan();
    this.loadData();
  },
  beforeDestroy() {
    if (this.scanTimer) {
      clearInterval(this.scanTimer);
    }
  },
  methods: {
    // 开始雷达扫描动画
    startRadarScan() {
      this.scanTimer = setInterval(() => {
        this.scanAngle = (this.scanAngle + 2) % 360;
      }, 50);
    },
    
    // 刷新数据
    refreshData() {
      this.loadData();
    },
    
    // 加载数据
    loadData() {
      this.loading = true;
      this.loadAlarmLogs();
      this.loadDeviceInfo();
    },

    // 加载报警日志
    loadAlarmLogs() {
      this.logLoading = true;
      getSecurityLogs().then(response => {
        if (response.code === 200) {
          this.alarmLogs = response.data || [];
        }
      }).catch(error => {
        console.error('获取报警日志失败:', error);
        this.$message.error('获取报警日志失败');
      }).finally(() => {
        this.logLoading = false;
      });
    },

    // 加载设备信息
    loadDeviceInfo() {
      getSecurityDeviceList().then(response => {
        if (response.code === "200") {
          const devices = response.data || [];
          if (devices.length > 0) {
            this.deviceInfo = devices[0]; // 取第一个设备
            // 根据设备状态设置工作模式（这里可以根据实际需求调整）
            this.workMode = this.deviceInfo.opStatus === '1' ? 'manual' : '';
          }
        }
      }).catch(error => {
        console.error('获取设备信息失败:', error);
        this.$message.error('获取设备信息失败');
      }).finally(() => {
        this.loading = false;
      });
    },
    
    // 显示设置
    showSettings() {
      this.$message.info('参数配置功能开发中...');
    },
    
    // 显示设备设置
    showDeviceSettings() {
      this.$message.info('设备设置功能开发中...');
    },
    
    // 工作模式改变
    onWorkModeChange(value) {
      if (this.deviceInfo) {
        updateDeviceWorkMode(this.deviceInfo.id, value).then(response => {
          if (response.code === 200) {
            this.$message.success('工作模式更新成功');
            this.loadDeviceInfo(); // 重新加载设备信息
          } else {
            this.$message.error(response.msg || '工作模式更新失败');
          }
        }).catch(error => {
          console.error('更新工作模式失败:', error);
          this.$message.error('更新工作模式失败');
        });
      }
    },

    // 获取日志标签类型
    getLogTagType(logType) {
      switch(logType) {
        case '1': return 'danger';  // 报警
        case '2': return 'warning'; // 警告
        case '3': return 'info';    // 信息
        default: return 'info';
      }
    },

    // 获取日志类型文本
    getLogTypeText(logType) {
      switch(logType) {
        case '1': return '报警';
        case '2': return '警告';
        case '3': return '信息';
        default: return '未知';
      }
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return '';
      return timeStr.replace(/(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}):\d{2}/, '$1 $2');
    },

    // 获取设备状态样式类
    getDeviceStatusClass() {
      if (!this.deviceInfo) return 'normal';
      // 这里可以根据实际的设备状态字段来判断
      return 'normal';
    },

    // 获取设备状态文本
    getDeviceStatusText() {
      if (!this.deviceInfo) return '正常';
      // 这里可以根据实际的设备状态字段来判断
      return '正常';
    },

    // 获取布防状态样式类
    getOpStatusClass() {
      if (!this.deviceInfo) return 'disarmed';
      return this.deviceInfo.opStatus === '1' ? 'armed' : 'disarmed';
    },

    // 获取布防状态文本
    getOpStatusText() {
      if (!this.deviceInfo) return '撤防';
      return this.deviceInfo.opStatus === '1' ? '布防' : '撤防';
    }
  }
}
</script>

<style scoped>
.security-monitor {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 10px;
}

.page-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
  font-weight: 500;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.main-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 左侧面板样式 */
.left-panel {
  height: 100%;
}

.radar-section {
  margin-bottom: 30px;
}

.radar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.radar-svg {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.alarm-log-section {
  background: #fafafa;
  border-radius: 8px;
  padding: 20px;
}

.section-header {
  margin-bottom: 15px;
}

.header-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.blue-line {
  width: 4px;
  height: 18px;
  background-color: #3b82f6;
  margin-right: 10px;
  border-radius: 2px;
}

.log-container {
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
}

.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #999;
}

.no-data-icon {
  margin-bottom: 10px;
}

.no-data-text {
  font-size: 14px;
  color: #ccc;
}

.log-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12px;
}

.log-time {
  color: #666;
  margin-right: 8px;
  min-width: 80px;
}

.log-device {
  color: #409eff;
  margin: 0 8px;
  min-width: 100px;
}

.log-message {
  color: #333;
  flex: 1;
}

/* 右侧面板样式 */
.right-panel {
  height: 100%;
}

.device-card {
  background: #fafafa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.device-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.settings-btn {
  padding: 5px;
  color: #666;
  font-size: 16px;
}

.settings-btn:hover {
  color: #3b82f6;
}

.device-status {
  margin-bottom: 25px;
}

.status-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 14px;
}

.status-label {
  color: #666;
  margin-right: 8px;
}

.status-value {
  font-weight: 500;
}

.status-value.normal {
  color: #67c23a;
}

.status-value.armed {
  color: #f56c6c;
}

.status-value.disarmed {
  color: #909399;
}

.work-mode {
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.mode-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.blank-area {
  height: 200px;
  background: #fafafa;
  border-radius: 8px;
  border: 2px dashed #ddd;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content .el-col {
    margin-bottom: 20px;
  }
  
  .radar-svg {
    width: 250px;
    height: 250px;
  }
}
</style>